import React, { useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Tabs } from 'antd';
import DeptTree from './components/depttree';
import DeptEdit from './components/deptedit';
import Employee from './components/employee';
import { FormattedMessage } from 'umi';

const { TabPane } = Tabs;

const DeptPage: React.FC = () => {
  const [parentNode, setParentNode] = useState({});
  const [node, setNode] = useState<any>({});
  const deptTree = useRef<any>(null);

  const doSetParent = (parentNode: any) => {
    setParentNode(parentNode);
  };

  const doSetCurrent = (node: any) => {
    setNode(node.item);
  };

  const freshDept = () => {
    if (deptTree.current) {
      deptTree.current.fetchData();
    }
  };

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Row gutter={[12, 12]}>
        <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}>
          <Card>
            <DeptTree
              setParent={doSetParent}
              setCurrent={doSetCurrent}
              onRef={(ref: any) => {
                deptTree.current = ref;
              }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={12} lg={12} xl={16} xxl={16}>
          <Card>
            <Tabs defaultActiveKey="1">
              <TabPane
                tab={
                  <span>
                    <FormattedMessage id="pages.department.config" />
                  </span>
                }
                key="1"
              >
                <DeptEdit
                  node={node}
                  parentNode={parentNode}
                  refresh={freshDept}
                />
              </TabPane>
              <TabPane
                tab={
                  <span>
                    <FormattedMessage id="pages.employee.config" />
                  </span>
                }
                key="2"
              >
                <Employee />
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </PageHeaderWrapper>
  );
};

export default DeptPage;
